<!-- 滑动切换选项卡演示(标准写法) -->
<template>
	<view class="">
		<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
		<z-paging-swiper>
			<template #top>
				<view class=""  >
					<fui-nav-bar title="采购订单" isFixed isOccupy  @leftClick="pageBack"></fui-nav-bar>
					<view class="u-flex u-p-l-35 u-p-r-35 u-p-t-20 u-p-b-20" style="background-color: #fff;">
						<view class="u-flex-1 u-m-r-16" >
							<fui-search-bar isLeft searchText v-model="keywords" placeholder="关键字筛选" :cancel="false" @search="reloadFn" background="#fff" inputBackground="#f0f0f0" paddingTb="0" paddingLr="0" radius="45"></fui-search-bar>
						</view>
						<view class="u-flex-col " @tap="filterShow = true" :style="{color:noFilter?'#333':'#ff551a'}">
							<view class="u-flex" style="flex-direction: column;">
								<view class="iconfont icon-shaixuan1" style="font-size: 32rpx;"></view>
							</view>
							<view class="u-font-22">筛选</view>
						</view>
					</view>
					<fui-tabs :isSlider="false" :tabs="tabList" selectedColor="#333" @change="tabsChange" :current="current"></fui-tabs>
				</view>
			</template>
			<swiper class="swiper" :current="current" @animationfinish="animationfinish" >
				<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
					<order-list :ref="`orderList${index}`" :reload="current===index" @cancelOrder="cancelOrderFn" :keyWords="keywords" :filterData="filterData" :tabIndex="index" :value="item.value" :currentIndex="current"></order-list>
				</swiper-item>
			</swiper>
		</z-paging-swiper>
		<!-- 筛选 -->
		<fui-bottom-popup :show="filterShow" @close="submitBtnClickFn">
			<view class="box-padding" >
				<view class="u-text-center u-m-b-30 u-font-32 u-text-bold">筛选</view>
				<view class="u-m-b-30">
					<view class="u-font-30 u-text-bold ">关键字</view>
					<view style="border-bottom: 1rpx solid #eaeaea;" >
						<fui-input  v-model="keywords" :padding="['28rpx',0]"  :borderBottom="false" placeholder="输入关键字筛选" ></fui-input>
					</view>
				</view>
				<view class="u-m-b-30">
					<view class="u-font-30 u-text-bold">销售商</view>
					<view style="border-bottom: 1rpx solid #eaeaea;" >
						<fui-input  v-model="saleShopName" :padding="['28rpx',0]"   :borderBottom="false"  placeholder="请输入销售商名称" ></fui-input>
						<!-- <u-input v-model="saleShopName" type="text" :border="false"  placeholder="请输入销售商名称" /> -->
					</view>
				</view>
				<view class="u-font-30 u-text-bold u-m-b-30">下单日期</view>
				<view class="price-container u-flex u-row-between ">
					<view :class="['price-dad',{'grey-color':startTime===''} ]" @tap="openDateShow(true)">
						{{startTime!==''?startTime:'开始日期'}}
					</view>
					<view style="margin: 0 30rpx;">-</view>
					<view :class="['price-dad',{'grey-color':endTime===''} ]" @tap="openDateShow(false)">
						{{endTime!==''?endTime:'结束日期'}}
					</view>
				</view>
				<view class="u-font-30 u-text-bold u-m-t-40 u-m-b-30">支付状态</view>
				<view class="u-flex">
					<view :class="['filter-status',{'filter-status-active':IsPaid==='all'}]" @click="IsPaid = 'all'">全部</view>
					<view :class="['filter-status',{'filter-status-active':IsPaid === true}]"  @click="IsPaid = true" style="margin: 0 20rpx;">已支付</view>
					<view :class="['filter-status',{'filter-status-active':IsPaid === false}]"  @click="IsPaid = false">未支付</view>
				</view>
					<view class="btn-group u-flex">
						<view class="filter-reset u-text-center" @click="resetFilterFn">重置</view>
						<view class="filter-confirm u-text-center" @click="submitBtnClickFn()">确定</view>
					</view>
			</view>
		</fui-bottom-popup>
		<fui-date-picker :value="defaultDate" cancel-text="清除" cancel-color="#ff551a" :show="dateShow" type="5"
		:size="14" @change="dateConfirmFn" @cancel="dateCancelFn"></fui-date-picker>
		<fui-modal :show="modalShow" title="提示" maskClosable :descr="modalContent" @click="modalConfirm" @cancel="modalCancel"></fui-modal>
	</view>
</template>

<script>
	import OrderList from './list.vue';
	import {useUserStore} from '@/store/user.js';
	import { mapState } from 'pinia';
	export default {
		data() {
			return {
				modalShow:false,
				modalContent:'',
				IsPaid:'all',
				dateShow:false,
				dateShowType:0,
				defaultDate:'',
				params: {
					year: true,
					month: true,
					day: true
				},
				startTime:'',
				endTime:'',
				filterShow:false,
				saleShopName:'',
				keywords:'',
				tabList: [
					{
						name:'全部',
						value:99
					},
					{
						name:'待确认',
						value:0
					},
					{
						name:'待发货',
						value:1
					},
					{
						name:'待收货',
						value:2
					},
					{
						name:'待评价',
						value:3
					},
				],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				reloadFlag:true,
				activeStyle:{
					fontWeight:'bold',
					fontSize:'32rpx',
				},
				inactiveStyle:{
					fontSize:'28rpx',
				},
				filterData:{
					startTime:'',
					endTime:'',
					keywords:'',
					saleShopName:'',
					IsPaid:'all'
				},
				orderId:'',
			};
		},
		components:{
			OrderList
		},
		computed:{
			noFilter(){
				return this.filterData.startTime == ''&& this.filterData.endTime == ''&& this.filterData.keywords == ''&& this.filterData.saleShopName == ''&& this.filterData.IsPaid == 'all'
			},
			...mapState(useUserStore,['isPurchase','isReceive'])
		},
		onShow() {
			uni.$off('reloadSignList')//建议先销毁一次监听，再进行新的一次监听，否则会出现重复监听的现象
			let that = this;
			uni.$once('reloadSignList',function(data){
				that.reloadFlag = false;
				that.current = Number(data);
				that.reloadFlag = true;
			});
		},
		created() {
			
		},
		methods: {
			cancelOrderFn(val){
				if(val.type === 'cancel'){
					this.modalContent = `您确定要取消订单吗？`;
				}else{
					this.modalContent = `您确定要确认收货吗？`;
				}
				this.modalShow = true;
				this.orderId = val.id;
			},
			modalCancel(){
				this.modalShow = false;
			},
			async modalConfirm(e){
				console.log(this.current);
				if(e.index === 1){
					if(this.modalContent == '您确定要取消订单吗？'){
						if(!this.isPurchase){
							return uni.$fui.toast('当前账号没有取消订单的权限');
						}
						uni.showLoading({
							title: 'loading...',
						})
						const res = await this.$newHttp.put('api/Trade/BuyerCancellationTrade?id=' + this.orderId);
						uni.hideLoading()
						if(res.code === 200){
							uni.$fui.toast('取消成功');
							this.$refs[`orderList${this.current}`][0].refreshFn();
						}else{
							uni.$fui.toast(res.erroMessage);
						}
					}else{
						if(!this.isReceive){
							return uni.$fui.toast('当前账号没有确认收货的权限');
						}
						uni.showLoading({
							title: 'loading...',
						})
						const res = await this.$newHttp.put('api/Trade/ConfirmReceipt?id=' + this.orderId);
						uni.hideLoading()
						if(res.code === 200){
							uni.$fui.toast('已收货');
							this.$refs[`orderList${this.current}`][0].refreshFn();
						}else{
							uni.$fui.toast(res.erroMessage);
						}
					}
				}
				this.modalShow = false;
			},
			// 提交筛选条件
			submitBtnClickFn(){
				this.$set(this.filterData,'startTime',this.startTime);
				this.$set(this.filterData,'endTime',this.endTime);
				this.$set(this.filterData,'keywords',this.keywords);
				this.$set(this.filterData,'saleShopName',this.saleShopName);
				this.$set(this.filterData,'IsPaid',this.IsPaid);
				this.filterShow = false;
			},
			// 重置筛选条件
			resetFilterFn(){
				this.startTime = '';
				this.endTime = '';
				this.keywords = '';
				this.saleShopName = '';
				this.IsPaid = 'all'
			},
			// 日期选择提交
			dateConfirmFn(val){
				console.log(val);
				if(this.dateShowType ===1){
					this.startTime = val.result;
				}else{
					this.endTime = val.result;
				}
				this.dateShow = false;
			},
			// 日期选择删除
			dateCancelFn(){
				if(this.dateShowType ===1){
					this.startTime = '';
				}else{
					this.endTime = '';
				}
				this.dateShow = false;
			},
			// 打开时间选择器
			openDateShow(isStart){
				this.defaultDate = isStart?this.startTime:this.endTime;
				this.dateShowType = isStart?1:2;
				this.dateShow = true;
			},
			
			toPage() {
				uni.navigateBack();
			},
			//tabs通知swiper切换
			tabsChange(e) {
				this.current = e.index;
			},
			//swiper滑动结束
			animationfinish(e) {
				let current = e.detail.current;
				this.current = current;
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/static/iconfont/iconfont.css';
	.swiper {
		height: 100%;
	}
	.price-container{
		.price-dad{
			background-color: #fff;
			border: 1px solid #E7E7E7;
			border-radius: 35px;
			box-sizing: border-box;
			padding:24rpx;
			flex:1;
			text-align: center;
			font-size: 24rpx
		}
	}
	.filter-status{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 70rpx;
		border-radius: 35rpx;
		border: 1rpx solid #e7e7e7;
		font-size: 24rpx;color: #999;
		flex:1;
	}
	.filter-status-active{
		border: 1rpx solid #ff551a;
		color: #ff551a;
	}
	.btn-group{
		border-radius: 50rpx;
		overflow: hidden;
		margin:100rpx 0 50rpx;
		.filter-reset{
			box-sizing: border-box;
			padding: 24rpx 0;
			flex:1;
			background-color: #DDDDDD;
			font-size: 28rpx;
		}
		.filter-confirm{
			box-sizing: border-box;
			padding: 24rpx 0;
			flex:1;
			font-size: 28rpx;
			background-color: #FFBB1A;
		}
	}
	
</style>
